<template>
    <div>
        <div class="result-header">
            <div class="header-title">诊断结果</div>
            <p class="header-desc">经过诊断，您可能被确诊以下 {{diagnosisResult.length}} 种疾病</p>
        </div>
        <el-card>
        <el-tabs>
            <el-tab-pane v-for="(result, index) in diagnosisResult" :key="index"
                :label="result.disease"
            >
            <el-scrollbar>
                <div class="result-summarize">
                    <div class="result-item">
                        <div class="item-title">疾病名称</div>
                        <div class="item-content">{{ result.disease }}</div>
                    </div>
                    <div class="result-item">
                        <div class="item-title">分诊科室</div>
                        <div class="item-content">{{ result.section }}</div>
                    </div>
                    <div class="result-item">
                        <div class="item-title">诊断概率</div>
                        <div class="item-content">{{ result.odds }} %</div>
                    </div>
                    <div class="result-item">
                        <div class="item-title">就诊建议</div>
                        <div class="item-content">立即就诊</div>
                    </div>
                </div>
                <div class="result-detail">
                    <div class="detail-title">疾病描述</div>
                    <p class="detail-content markdown-here-wrapper" v-if="result.desc" v-html="marked(result.desc)"></p>
                    <div class="detail-title">诊断依据</div>
                    <p class="detail-content markdown-here-wrapper">
                        <ul>
                            <li v-for="(item, index) in result.explain" :key="index">{{ item }}</li>
                        </ul>
                    </p>
                    <div class="detail-title">医学检查</div>
                    <p class="detail-content markdown-here-wrapper">
                        <ul>
                            <li v-for="(item, index) in result.checkup" :key="index">{{ item }}</li>
                        </ul>
                    </p>
                </div>
            </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { usePatientStore } from '../../store/patient';
import { marked } from 'marked';
import '../../assets/styles/markdown.scss';

const patientStore = usePatientStore();
const { diagnosisResult } = patientStore;
</script>

<style lang="scss" scoped>
.result-header {
    padding: 1rem;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    .header-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }
}

.result-summarize {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px 0;
    background-color: #f5f5f5;
    .result-item {
        flex: 1;
        border-radius: 20px;
        border: 2px solid #cccccc;
        margin: 0 20px;
        padding: 1rem;
        box-sizing: border-box;
        .item-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .item-content {
            padding: 10px;
            color: #666666;
            font-size: 1.5rem;
            font-weight: bold;
            text-align: end;
        }
    }
}

.result-detail {
    height: 45vh;
    padding: 0 20px;
    .detail-title {
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .detail-content {
        margin-bottom: 1rem;
    }
}
</style>